<template>
  <div ref="mapCharts" class="mapCharts"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import henan from "../../utils/henan.json";
import * as charts from "echarts";
const mapCharts = ref<any>(0);
const mapData = [
  { name: "郑州", value: [113.665412, 34.757975, 2], count: 10086 },
  { name: "安阳", value: [114.358257, 35.878529, 0], count: 10086 },
  { name: "鹤壁", value: [114.31602, 35.721499, 0], count: 10086 },
  { name: "濮阳", value: [115.287416, 35.809288, 0], count: 10086 },
  { name: "新乡", value: [114.095247, 35.263966, 0], count: 10086 },
  { name: "焦作", value: [113.137719, 35.114644, 0], count: 10086 },
  { name: "济源", value: [112.398673, 35.099131, 0], count: 10086 },
  { name: "开封", value: [114.541763, 34.604497, 0], count: 10086 },
  { name: "商丘", value: [115.702245, 34.28898, 0], count: 10086 },
  { name: "周口", value: [114.883192, 33.721762, 0], count: 10086 },
  { name: "许昌", value: [113.715606, 34.071457, 0], count: 10086 },
  { name: "洛阳", value: [112.038509, 34.293198, 0], count: 10086 },
  { name: "南阳", value: [112.288385, 33.044723, 0], count: 10086 },
  { name: "信阳", value: [114.889128, 32.080437, 0], count: 10086 },
  { name: "漯河", value: [113.905678, 33.65448, 0], count: 10086 },
  { name: "三门峡", value: [111.112608, 34.36205, 0], count: 10086 },
  { name: "驻马店", value: [114.156353, 32.922684, 0], count: 10086 },
  { name: "平顶山", value: [113.016514, 33.795715, 0], count: 10086 },
];
const options = {
  Animation: true,
  geo: {
    map: "henan",
    zoom: 1,
    // aspectScale: 1.1,
    label: {
      show: false,
      color: "#fff",
      position: "top",
      fontSize: 10,
    },
    emphasis: {
      itemStyle: {
        // color: "rgba(51,69,89,.5)",
        color: "#007575",
        borderColor: "#516a89",
        borderWidth: 1,
      },
      focus: "self",
      label: {
        show: false,
      },
    },
    roam: "scale",
    itemStyle: {
      normal: {
        color: "rgba(51, 69, 89, .5)",
        borderColor: "#516a89",
        borderWidth: 1,
      },
      shadowColor: "rgba(0, 0, 0, 0.5)",
      shadowBlur: 10,
    },
    select: {
      label: { show: false },
      itemStyle: {
        areaColor: "#007575",
      },
    },
    scaleLimit: {
      min: 0.7,
      max: 1.2,
    },
    selectedMode: "single",
  },
  series: [
    {
      type: "lines",
      name: "线",
      coordinateSystem: "geo",
      effect: {
        show: true,
        symbol: "arrow",
        constantSpeed: 30,
        symbolSize: 5,
        color: "#11fdaa",
        trailLength: 0.5,
        loop: true,
        roundTrip: false,
      },
      symbolSize: 10,
      lineStyle: {
        color: "#007884",
        curveness: 0.3,
      },
      emphasis: {
        focus: "self",
        blurScope: "coordinateSystem",
        lineStyle: {
          color: "red",
        },
      },
      select: {
        lineStyle: {
          color: "#28ffb3",
        },
      },
      selectedMode: "single",
      data: mapData.map((item) => ({
        name: item.name,
        coords: [item.value, [113.665412, 34.757975, "郑州"], 0],
      })),
    },
    {
      type: "effectScatter",
      name: "标记",
      colorBy: "data",
      legendHoverLink: true,
      effectType: "ripple",
      showEffectOn: "render",
      rippleEffect: {
        number: 2,
        period: 5,
        scale: 3.5,
        brushType: "stroke",
      },
      coordinateSystem: "geo",
      symbol: "circle",
      symbolSize: 8,
      cursor: "pointer",
      label: {
        show: true,
        position: [-25, -15],
        formatter: "{b}",
        color: "#11fdaa",
        fontSize: "13px",
      },
      itemStyle: {
        color: "#11fdaa",
        // color: (e) => {
        //   if (e.data.value.pop() === 1) {
        //     return "#02acfc";
        //   } else {
        //     return "#11fdaa";
        //   }
        // },
        borderWidth: 0,
      },
      emphasis: {
        scale: true,
        focus: "self",
        label: {
          show: true,
          position: [-25, -15],
          color: "#11fdaa",
          fontSize: "14px",
        },
      },
      blur: {
        label: {
          show: true,
          position: [-25, -15],
          formatter: "{b}",
          color: "#11fdaa",
          fontSize: "13px",
        },
      },
      selectedMode: "single",
      zlevel: 2,
      data: mapData,
    },
  ],
  visualMap: [
    {
      show: true,
      type: "piecewise",
      dimension: 2,
      seriesIndex: 1,
      pieces: [
        { min: 0, max: 0, color: "#11fdaa", symbolSize: 8, label: "群体" },
        { min: 1, max: 2, color: "#02acfc", symbolSize: 14, label: "攻击点" },
      ],
      align: "left",
      showLabel: true,
      textStyle: {
        color: "#fff",
      },
    },
  ],
  tooltip: {
    trigger: "item",
    confine: true,
    formatter: (params) => {
      const { seriesType, data } = params;
      if (seriesType === "lines") {
        return `<span style="color:#11fdaa">${data.name} -> ${data.coords[1][2]}</span>`;
      } else if (seriesType === "effectScatter") {
        return `<span style="color:#11fdaa">城市：${data.name}<br />电话：${data.count}</span>`;
      }
      return "111";
    },
    backgroundColor: "#00232b",
    textStyle: {
      color: "#fff",
    },
  },
};
// const mapCase = ref<null | object>(null);
onMounted(() => {
  const mapCase = charts.init(mapCharts.value);
  charts.registerMap("henan", henan);
  mapCase.setOption(options, true);
});
</script>
<style scoped lang="scss">
.mapCharts {
  width: 100%;
  height: 100%;
}
</style>
